<template>
  <i :class="['iconfont', `icon-${name}`, 'custom-icon']" v-bind="$attrs"
    :style="{ color: color, fontSize: size + 'px' }"></i>
</template>

<script setup>
defineProps({
  name: {
    type: String,
    default: ''
  },
  color: {
    type: String,
    default: '#000'
  },
  size: {
    type: [Number, String],
    default: 14
  }
})
</script>

<style lang="scss" scoped>
@import url('@/assets/fonts/iconfont.css');

.custom-icon {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  font-weight: bold;
  transition: all 0.3s ease;
}
</style>
